<template>
  <div class='page-container'>
    <h1>按钮的权限控制</h1>
    <span
      class="myred">说明:在这里面通过Vue.directive创建了一个控制按钮是否显示的指令,其实就是登录的时候,后端会通过接口返回一个,当前用户具有的所有按钮的权限标识数组;然后我这边.把自定义指令定义在每一个按钮上.传上一个当前按钮的权限标识.
      然后在指令的inserted钩子函数里面,因为这个钩子函数能保证父组件的存在,vue3里面是mounted钩子函数,来判断这个权限标识是否在后端返回的标识数组中,如果在就按钮正常展示.不在就通过el.parentNode.removeChild删除元素.因为这个钩子函数默认传入了我记得像当前元素el
      binding.value是当前自定义指令的参数,也就是当前按钮的标识符.</span>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" v-hasPermiButton="['system:user:adds']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="Edit" v-hasPermiButton="['system:user:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="Delete" v-hasPermi="['system:user:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" icon="Upload" v-hasPermi="['system:user:import']">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="Download" v-hasPermi="['system:user:export']">导出</el-button>
      </el-col>
    </el-row>
    <div>获取到路由传递过来的参数是:{{ routerParams }}</div>
  </div>
</template>
<script setup lang='ts'>
/**
 * 模块引入
 */
import { reactive, ref } from 'vue';
import { useRoute } from "vue-router"
import useUserStore from "@/store/modules/user"
const route = useRoute()
const routerParams = ref()
console.log("路由接受参数,当前路由的信息对象", route)
routerParams.value = route.query




const useUser = useUserStore()
const vHasPermiButton = {
  // created() { },
  created(el, binding) {
    const currentValue = binding.value  //指令当前的参数修饰符
    const allPermissions = ["*:*:*"]  //超级管理员的权限标识符
    // console.log("所有的指令修饰符", useUser.permissions);
    if (useUser.permissions[0] == allPermissions[0]) {
      return
    }
    // console.log("是否有父组件", el, el.parentNode);
    // 判断当前按钮的权限标识符currentValue 是不是在返回的这个用户具有的标识符列表里面
    // ['system:user:add']  是不是在  ['system:user:resetPwd',  'system:post:list', 'monitor:operlog:export']
    if (!currentValue.some(item => useUser.permissions.includes(item))) {
      // 如果没有权限，就隐藏这个按钮
      el.style.display = 'none'
      // el.parentNode.removeChild(el)
    }

  },
}
</script>
<style lang='scss' scoped>
.page-container {}
</style>